import React from 'react';
import styles from './index.less';
import type { IProps } from '@/components/CustomElement/StatisticsCard/interface';
// 统计卡片
const StatisticsCard: React.FC<IProps> = ({
    title,
    content,
    description,
    titleSize = 'normal',
    titleStyle,
    contentSize = 'normal',
    contentStyle,
    descSize = 'normal',
    descStyle,
    ...reset
}) => {
    const TSize = {
        sm: 14,
        md: 16,
        normal: 18,
        lg: 20,
        xl: 24,
    };

    const CSize = {
        sm: 16,
        md: 20,
        normal: 24,
        lg: 28,
        xl: 32,
    };

    const DSize = {
        sm: 12,
        md: 14,
        normal: 16,
        lg: 18,
        xl: 20,
    };

    return (
        <div className={styles.statistics_card} {...reset}>
            <div style={{ fontSize: TSize[titleSize], ...titleStyle }}>
                <div>{title}</div>
            </div>
            <div style={{ fontSize: CSize[contentSize], ...contentStyle }}>{content}</div>
            <div style={{ fontSize: DSize[descSize], ...descStyle }}>{description}</div>
        </div>
    );
};

export default StatisticsCard;
